<template>
  <div>
    <div class="header">
      <div class="icon_tag">
        <i class="el-icon-s-fold" @click="changeTiggter" v-if="!isShowIcon"></i>
        <i class="el-icon-s-unfold" @click="changeTiggter" v-else></i>
      </div>
      <div class="icon_title">
        {{ $t("message.headTitle") }}
      </div>
      <div class="icon_right">
        <el-tooltip effect="dark" placement="bottom">
          <div slot="content">
            {{ this.locale ? "切换中文" : "change-English" }}
          </div>
          <i
            class="el-icon-s-help"
            style="margin-right: 10px"
            @click="change"
          ></i>
        </el-tooltip>
        <el-tooltip effect="dark" placement="bottom">
          <i
            :class="fullShow ? 'el-icon-loading' : 'el-icon-full-screen'"
            @click="fullScreen"
          ></i>
          <span slot="content">{{ full() }}</span>
        </el-tooltip>
        <el-tooltip effect="dark" placement="bottom">
          <div slot="content">{{ $t("message.bl") }}</div>
          <i class="el-icon-bell" @click="readMe"></i>
        </el-tooltip>
        <div class="red"></div>
        <el-avatar
          shape="square"
          fit="cover"
          :size="size"
          :src="circleUrl"
          class="avatar"
        ></el-avatar>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link"
            >admin <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>{{ $t("message.cl") }}</el-dropdown-item>
            <el-dropdown-item divided command="logOut">{{
              $t("message.cll")
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "../bus/bus";
export default {
  components: {},
  data() {
    return {
      title: "后台管理系统",
      isShowIcon: true,
      fullShow: false, //用作是否显示全屏
      size: "large",
      locale: false,
      circleUrl:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    };
  },
  methods: {
    changeTiggter() {
      this.isShowIcon = !this.isShowIcon;
      bus.$emit("isShowIcon", this.isShowIcon);
    },
    fullScreen() {
      //全屏事件
      var element = document.documentElement;
      if (!this.fullShow) {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        }
      } else {
        // 退出全屏事件
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
      this.fullShow = !this.fullShow;
    },
    change() {
      if (this.$i18n.locale === "cn") {
        this.locale = true;
        this.$i18n.locale = "zn";
      } else {
        this.$i18n.locale = "cn";
        this.locale = false;
      }
    },
    full() {
      //fullShow ? this.$t('message.al') : "全屏"
      if (this.fullShow) {
        return this.$t("message.al");
      } else {
        return this.$t("message.nal");
      }
    },
    handleCommand(val) {
      if (val === "logOut") {
        localStorage.removeItem("userName");
        localStorage.removeItem("password");
        this.$router.push({ name: "login" });
        this.$message({
          type:'warning',
          message:'已退出登录'
        })
      }
    },
    readMe(){
      this.$router.push({path:'/home_page3'})
    }
  },
};
</script>

<style scoped>
.header {
  display: flex;
  height: 70px;
  width: 100%;
  background: #242f42;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 22px;
  color: #ffffff;
}
.icon_tag {
  width: 64px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.icon_title {
  width: 250px;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}
.icon_right {
  position: absolute;
  width: 230px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 20px;
  cursor: pointer;
}
.el-icon-bell {
  margin-left: 10px;
}
.avatar {
  margin-left: 10px;
  margin-right: 10px;
}
.el-dropdown-link {
  cursor: pointer;
}
.red {
  position: absolute;
  width: 6px;
  height: 6px;
  background: red;
  border-radius: 50%;
  top: 22px;
  right: 130px;
}
</style>